@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 94.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Live2D specific styles */
.live2d-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.live2d-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--foreground));
}

@keyframes float0 {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.8; }
  50% { transform: translate3d(12px, -18px, 0) rotate(6deg); opacity: 1; }
  100% { transform: translate3d(-8px, -32px, 0) rotate(-4deg); opacity: 0.75; }
}

@keyframes float1 {
  0% { transform: translate3d(0, 0, 0) rotate(3deg); opacity: 0.65; }
  50% { transform: translate3d(-16px, -22px, 0) rotate(-8deg); opacity: 0.9; }
  100% { transform: translate3d(10px, -36px, 0) rotate(4deg); opacity: 0.6; }
}

@keyframes float2 {
  0% { transform: translate3d(0, 0, 0) rotate(-2deg); opacity: 0.7; }
  50% { transform: translate3d(20px, -24px, 0) rotate(3deg); opacity: 0.95; }
  100% { transform: translate3d(-12px, -40px, 0) rotate(-6deg); opacity: 0.7; }
}

.heart-emit {
  animation-name: heartFloat;
  animation-timing-function: cubic-bezier(0.25, 0.55, 0.35, 1);
  animation-fill-mode: forwards;
  display: inline-block;
  opacity: 0;
  filter: drop-shadow(0 6px 12px rgba(255, 102, 140, 0.32));
  will-change: transform, opacity;
}

@keyframes heartFloat {
  0% {
    transform: translate3d(var(--heart-base-x, 0px), 0, 0) scale(0.6) rotate(0deg);
    opacity: 0;
  }
  22% {
    opacity: 0.92;
    transform: translate3d(calc(var(--heart-base-x, 0px) * 0.85), calc(-18px + var(--heart-y, 0px) * 0.3), 0) scale(0.82) rotate(calc(var(--heart-rot, 10deg) * 0.18));
  }
  55% {
    opacity: 0.78;
    transform: translate3d(calc(var(--heart-base-x, 0px) + var(--heart-jitter, 0px) * 0.5), calc(-78px + var(--heart-y, 0px) * 0.6), 0) scale(1.08) rotate(calc(var(--heart-rot, 10deg) * 0.68));
  }
  77% {
    opacity: 0.58;
    transform: translate3d(calc(var(--heart-base-x, 0px) + var(--heart-jitter, 0px) * 0.85), calc(-122px + var(--heart-y, 0px) * 0.85), 0) scale(1.2) rotate(calc(var(--heart-rot, 10deg) * 0.92));
  }
  100% {
    transform: translate3d(calc(var(--heart-base-x, 0px) + var(--heart-jitter, 0px)), calc(-190px + var(--heart-y, 0px)), 0) scale(1.32) rotate(var(--heart-rot, 10deg));
    opacity: 0;
  }
}
